<template>
	<view class="page-container">
		<!-- 工作经历列表 -->
		<view class="experiences-list">
			<view class="experience-card current" v-for="(item, index) in workExperienceList" :key="index">
				<!-- 卡片顶部信息 -->
				<view class="card-header">
					<text class="company">{{item.company}}</text>
					<view class="card-actions">
						<button class="action-btn edit-btn" @click="handleEdit(index, item)">
							<text class="icon">✎</text>
						</button>
						<button class="action-btn delete-btn" @click="handleDelete(item._id)">
							<text class="icon">✕</text>
						</button>
					</view>
				</view>
				
				<!-- 职位和时间信息 -->
				<view class="card-subheader">
					<text class="position">{{item.position}}</text>
					<text class="period-text">{{item.startDate}} - {{item.endDate}}</text>
				</view>

				<!-- 卡片内容区域 -->
				<view class="card-content">
					<view class="job-description" v-if="item.description">
						{{item.description}}
					</view>

					<view class="key-accomplishments" v-if="item.accomplishments && item.accomplishments.length">
						<view class="accomplishment-item" v-for="(row,inx) in item.accomplishments" :key="inx">
							<text class="accomplishment-icon">•</text>
							<text class="accomplishment-text">{{row}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态提示 -->
			<view class="empty-state" v-if="workExperienceList.length === 0">
				<text class="empty-text">暂无工作经历</text>
				<text class="empty-hint">点击下方按钮添加您的工作经历</text>
			</view>
		</view>

		<!-- 底部固定添加按钮 -->
		<button class="add-button" @click="$router('/subPackages1/pages/workExperience/addOrEdit')">
			<text class="button-icon">+</text>
			<text class="button-text">添加工作经历</text>
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				workExperienceList: []
			}
		},

		onShow() {
			this.getInit()
		},

		methods: {
			async getInit() {
				const parmse = {
					databaseName: 'workExperience',
					queryId: uni.getStorageSync('userInfo')._id,
					state: 'look'
				};

				let res = await this.$axios('overallSituation', parmse)
				if (res.code == 200) {
					this.workExperienceList = res.data || []
				}

			},
			
			// 处理编辑操作
			handleEdit(index, item) {
				this.$router(`/subPackages1/pages/workExperience/addOrEdit?id=${item._id}`)
			},
			
			// 处理删除操作
			async handleDelete(id) {
				// 显示确认对话框
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这条工作经历吗？',
					success: async (res) => {
						if (res.confirm) {
							const deleteParams = {
								databaseName: 'workExperience',
								_id: id,
								state: 'delete'
							};
							
							let res = await this.$axios('overallSituation', deleteParams)
							if (res.code == 200) {
								this.$showToast("删除成功")
								this.getInit()
							} else {
								this.$showToast("删除失败")
							}
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.page-container {
		background-color: #f7f8fa;
		min-height: 100vh;
	}

	/* 页面标题 */
	.page-header {
		padding: 30rpx 40rpx;
		background-color: #fff;
		border-bottom: 1px solid #f1f1f1;
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #1d2129;
	}

	/* 列表容器 */
	.experiences-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		padding: 24rpx;
		height: 88vh;
		overflow-y: auto;
	}

	/* 空状态样式 */
	.empty-state {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #86909c;
	}
	
	.empty-text {
		font-size: 30rpx;
		margin-bottom: 16rpx;
	}
	
	.empty-hint {
		font-size: 24rpx;
	}

	/* 卡片样式 */
	.experience-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
		border-left: 6rpx solid transparent;
	}

	.experience-card:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	/* 当前工作卡片特殊样式 */
	.experience-card.current {
		border-left-color: #2c83f9;
	}

	/* 卡片头部 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.company {
		font-size: 32rpx;
		font-weight: 600;
		color: #1d2129;
	}
	
	/* 操作按钮容器 */
	.card-actions {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	
	/* 操作按钮样式 */
	.action-btn {
		width: 50rpx;
		height: 50rpx;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		border-radius: 8rpx;
		font-size: 24rpx;
	}
	
	.edit-btn {
		background-color: #f0f9ff;
		color: #2c83f9;
	}
	
	.delete-btn {
		background-color: #fff1f0;
		color: #f53f3f;
	}

	/* 卡片子标题 - 职位和时间 */
	.card-subheader {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		padding-bottom: 16rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.position {
		font-size: 26rpx;
		color: #4e5969;
	}

	.period-text {
		font-size: 24rpx;
		color: #86909c;
		white-space: nowrap;
	}

	.current-tag {
		font-size: 22rpx;
		color: #2c83f9;
		background-color: #e8f3ff;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		font-weight: 500;
	}

	/* 卡片内容 */
	.card-content {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.job-description {
		font-size: 26rpx;
		color: #4e5969;
		line-height: 1.7;
	}

	/* 成就列表 */
	.key-accomplishments {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		padding-left: 6rpx;
	}

	.accomplishment-item {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #6b7785;
		line-height: 1.6;
	}

	.accomplishment-icon {
		color: #2c83f9;
		margin-right: 16rpx;
		margin-top: 6rpx;
	}

	/* 底部添加按钮 */
	.add-button {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 80rpx);
		height: 96rpx;
		background-color: #2c83f9;
		color: #ffffff;
		border: none;
		border-radius: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 500;
		box-shadow: 0 8rpx 24rpx rgba(44, 131, 249, 0.3);
		transition: all 0.2s ease;
	}

	.add-button:hover {
		background-color: #1d72e8;
		box-shadow: 0 12rpx 32rpx rgba(44, 131, 249, 0.4);
	}

	.button-icon {
		font-size: 36rpx;
		margin-right: 14rpx;
	}
</style>
